import React, { memo,useEffect ,useRef,useState } from 'react'

import {Slider} from 'antd';
import { getSizeImage,formatMinuteSecond,getPlaySong } from '@/utils/format-utils';

import { PlaybarWrapper,Control,PlayInfo,Operator} from './style';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getSongDetailAction ,changeSequenceAction} from '../store/actionCreators';
import { useCallback } from 'react';
import { NavLink } from 'react-router-dom';


export default memo(function AppPlayerBar() {

    const [currentTime, setCurrentTime] = useState(0);
    const [progress, setProgress] = useState(0);
    const [isChangeing, setIsChangeing] = useState(false);
    const [isPlaying, setIsPlaying] = useState(false);

    const {currentSong,sequence}=useSelector(state=>({
        currentSong:state.getIn(["player","currentSong"]),
        sequence:state.getIn(["player","sequence"])
    }),shallowEqual)

    const dispatch=useDispatch();

    const audioRef = useRef();

    useEffect(() => {
       dispatch(getSongDetailAction(421423806))
    }, [dispatch])
    useEffect(() => {
        audioRef.current.src=getPlaySong(currentSong.id);
    }, [currentSong])

    const picUrl=(currentSong.al && currentSong.al.picUrl) || "";
    const singerName=(currentSong.ar && currentSong.ar[0].name) || "未知歌手";
    const duration = currentSong.dt || 0;
    const showCurrentTime = formatMinuteSecond(currentTime)
    // 当前进度 = 当前时间 / 总时长
    // const progress = (currentTime * 1000) / (duration *100)

    const playMusic = useCallback(()=>{
        isPlaying ? audioRef.current.pause():audioRef.current.play();
        setIsPlaying(!isPlaying)
    },[isPlaying])

    const timeUpdate=(e)=>{
        // console.log(e.target.currentTime);
        if(!isChangeing){
            setCurrentTime(e.target.currentTime * 1000);
            setProgress(currentTime / duration *100)
        }

    }
    const changeSequence=()=>{
        let currentSequence = sequence+1;
        if(currentSequence > 2){
            currentSequence = 0;
        }
        dispatch(changeSequenceAction(currentSequence))
    }
    // usecallback:当一个回调函数传到一个自定义组件
    const sliderChange = useCallback((value)=>{
        // console.log("sliderChange",value);
        setIsChangeing(true);
        const currentTime = value /100 *duration;
        setCurrentTime(currentTime)
        setProgress(value)
    },[duration])

    const sliderAfterChange=useCallback((value) => {
        // console.log("end",value);
        const currentTime = value /100 *duration /1000
        audioRef.current.currentTime=currentTime;
        setCurrentTime(currentTime*1000)
        setIsChangeing(false)
        if(!isPlaying){
            playMusic()
        }
    },[duration,isPlaying,playMusic])


    return (
        <PlaybarWrapper className="sprite_player ">
            <div className="content wrap-v2">
                <Control isPlaying={isPlaying}>
                    <button className="sprite_player btn prev"/>
                    <button className="sprite_player btn play" onClick={e => playMusic()}/>
                    <button className="sprite_player btn next"/>
                </Control>
                <PlayInfo>
                    <div className="image">
                        <NavLink to="/discover/player">
                            <img src={getSizeImage(picUrl,35)} alt=""/>
                        </NavLink>
                    </div>
                    <div className="info">
                        <div className="song">
                            <span className="song-name">{currentSong.name}</span>
                            <a className="singer-name" href="111" alt="">{singerName}</a>
                        </div>
                        <div className="progress">
                            <Slider defaultValue={30}
                                    value={progress}
                                    onChange={sliderChange}
                                    onAfterChange={sliderAfterChange}
                            />
                            <div className="time">
                                <span className="now-time">{showCurrentTime}</span>
                                <span className="divider">/</span>
                                <span className="duration">{formatMinuteSecond(duration)}</span>
                            </div>
                        </div>
                    </div>
                </PlayInfo>
                <Operator>
                    <div className="left">
                        <button className="sprite_player btn favor"></button>
                        <button className="sprite_player btn share"></button>
                    </div>
                    <div className="right sprite_player">
                        <button className="sprite_player btn volume"></button>
                        <button className="sprite_player btn loop" onClick={e=>changeSequence()}></button>
                        <button className="sprite_player btn playlist"></button>
                    </div>
                </Operator>
            </div>
            <audio ref={audioRef} onTimeUpdate={e=>timeUpdate(e)}/>
        </PlaybarWrapper>
    )
})
